<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>钟表</title>
	<style>
		.main{
			height: 500px;
			width: 500px;
			margin: 0 auto;
			border: 1px solid black;
		}
		.box{
			height: 400px;
			width: 400px;
			border-radius: 50%;
			border: 10px solid greenyellow;
			margin: 0 auto;
			position: relative;
			background-color: pink;

		}
		.box1{
			height: 40px;
			width: 40px;
			font-size: 30px;
			text-align: center;
			position: absolute;
		}
		#hour{
			position: absolute;
			height: 7px;
			width: 1px;
			background-color: lightpink;
			margin-left: 200px;
			margin-top: 195px;
		}
		.a{
			position: absolute;
			height:7px;
			width: 100px;
			background-color: red;
		}
		#min{
			position: absolute;
			height: 5px;
			width: 1px;
			background-color: orangered;
			margin-left: 200px;
			margin-top: 196px;
		}
		.b{
			position: absolute;
			height: 5px;
			width: 150px;
			background-color: orangered;
		}
		#s{
			position: absolute;
			height:3px;
			width: 1px;
			background-color: green;
			margin-top: 196px;
			margin-left: 200px;
			transform-style: preserve-3d;
		}
		.c{
			position: absolute;
			height: 3px;
			width: 200px;
			background-color:red;
		}

	</style>
</head>
<body>
	<div class="main">
		<div class="box">
			<div class="box1" style="margin-left: 180px;">12</div>
			<div class="box1" style="margin-top:30px;margin-left: 270px ">1</div>
			<div class="box1" style="margin-top: 90px;margin-left: 330px">2</div>
			<div class="box1" style="margin-top: 180px;margin-left: 360px">3</div>
			<div class="box1" style="margin-top: 270px;margin-left: 330px">4</div>
			<div class="box1" style="margin-top: 330px;margin-left: 270px">5</div>
			<div class="box1" style="margin-top: 360px;margin-left: 180px">6</div>
			<div class="box1" style="margin-top: 330px;margin-left: 90px">7</div>
			<div class="box1" style="margin-top: 270px;margin-left: 30px">8</div>
			<div class="box1" style="margin-top: 180px">9</div>
			<div class="box1" style="margin-top: 90px;margin-left:30px ">10</div>
			<div class="box1" style="margin-top:30px;margin-left: 90px">11</div>
			<div id="hour"><div class="a"></div></div>
			<div id="min"><div class="b"></div></div>
			<div id="s"  style="transform: 6deg"><div class="c"></div></div>
		</div>
	</div>
	</body>
<script>
	var a = document.getElementById('hour');
	var b = document.getElementById('min');
	var c = document.getElementById('s');
	var nowDate = new Date ();
	var num = "";
	var num1 = "";


	var timer =setInterval(function(){
		var nowDate = new Date ();

		var hour = nowDate.getHours();
		var min = nowDate.getMinutes();
		var second = nowDate.getSeconds();

		num1 =min/60;

		num=(hour+num1)/12;

		a.style.transform = 'rotateZ('+(num*360-90)+'deg)';
		b.style.transform = 'rotateZ('+(min*6-90)+'deg)';
		c.style.transform = 'rotateZ('+(second*6-90)+'deg)';


	},50);
</script>

</html>